<template>
	<view class="page-wraper">
		<u-form ref="uForm" :model="uForm" labelWidth="80" labelPosition="top" label-align="left">
			<u-form-item label="班级名称:" borderBottom prop="title" required>
				<u-input v-model="uForm.title" border="none" placeholder="班级名称" clearable></u-input>
			</u-form-item>

			<u-form-item label="选择课程" prop="course" borderBottom  required>
				<u--input v-model="uForm.course" disabled disabledColor="#ffffff" placeholder="请选择课程"
					border="none" clearable></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item>
				<u-alert  type = "info" description = "只用于方便班级内容查看课费包情况"></u-alert>
			</u-form-item>

			<u-form-item label="班级老师:" prop="teacher">
				<u-input v-model="uForm.teacher" disabled disabledColor="#ffffff" placeholder="请选择老师" border="none"
					clearable="true"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item>
				<u-alert  type = "info" description = "只用于关联后教师查看班级,和排课无关"></u-alert>
			</u-form-item>
			
			<u-form-item label="班级容量:" prop="stucount" required>
				<u-number-box v-model="uForm.stucount" @change="HandleStucountChange"></u-number-box>
			</u-form-item>
		
			<u-form-item>
				<u-alert  type = "info" description = "班级最大学员数量上限,0为不限制"></u-alert>
			</u-form-item>
			
			<u-form-item label="备注:" prop="memo">
				<u-textarea v-model="uForm.memo" placeholder="班级备注信息" count maxlength="300"></u-textarea>
			</u-form-item>

			<u-form-item>
				<view style="display: flex; align-content: center;text-align: center;">
					<u-button type="primary" @click="handleSave">保存</u-button>
					<u-button>取消</u-button>
				</view>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uForm: {
					title: '',
					course: '',
					teacher: '',
					stucount: '',
					memo: ''
				},

				rules: {
					title: {
						required: true,
						message: "请填写班级名称",
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			handleSave(){
				this.$refs.uForm.validate().then(res => {
					console.log(this.uForm)
				}).catch(errors => {
					console.log(errors);
				})
			},
			HandleStucountChange(e){
				console.log(e.value);
			}

		}
	}
</script>

<style>

</style>